let totalData = {};
let allData = {};
let trendData = {};
window.onload = function () {
    this.showTime();
    setInterval(() => {
        this.showTime();
    }, 1000);
    this.getData();
    setInterval(() => {
        this.getData();
    }, 5*60*1000);
}

//显示当前时间
function showTime() {
    let time = new Date();
    let year = time.getFullYear();
    let month = (time.getMonth() + 1) < 10 ? '0' + time.getMonth + 1 : time.getMonth() + 1;
    let date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
    let hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
    let minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
    let second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
    let str = year + '年' + month + '月' + date + '日' + ' ' + hour + ':' + minute + ':' + second;
    document.getElementById('time').innerText = str;
}
//获取疫情相关的数据
function getData() {
    $.ajax({
        url: 'https://view.inews.qq.com/g2/getOnsInfo',
        type: 'GET',
        data: { name: 'disease_h5' },
        dataType: 'JSONP',
    }).then(res => {
        if (!res.ret) {
            allData = JSON.parse(res.data);
            totalData = JSON.parse(res.data).chinaTotal;
            showNumData();
            showTopArea();
            showOutput();
            showEpidemicMap();
            showIncreaseTrend();
        }
    });
    $.ajax({
        url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list',
        type:'GET',
        data:{ modules:'chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare' },
        dataType:'json'
    }).then(res=>{
        if(!res.ret){
            trendData = res.data;
            showTotalTrend();
        }
    });
}
//展示我国疫情的总体情况（以数字的形式）
function showNumData() {
    if (totalData) {
        $("#confirm").text(totalData.confirm);
        $('#heal').text(totalData.heal);
        $('#dead').text(totalData.dead);
        $('#nowConfirm').text(totalData.nowConfirm);
        $('#noInfect').text(totalData.noInfect);
        $('#importedCase').text(totalData.importedCase);
    }
}
//通过折线图的方式表现最近一段时间，全国疫情的累计趋势
function showTotalTrend() {
    let totalTrend = trendData.chinaDayList;
    let total = [];
    let heal = [];
    let dead = [];
    let dates = [];
    totalTrend.forEach(item => {
        total.push(item.confirm);
        heal.push(item.heal);
        dead.push(item.dead);
        dates.push(item.date);
    });
    let myChart = echarts.init(document.getElementById('total'),'dark');
    let options = {
        title: {
            text: '全国病例累计趋势'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer:{
                lineStyle:{
                    type:'solid',
                    color: '#7171C6'
                }
            }
        },
        legend: {
            top:'25px'
        },
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dates
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                formatter:function(value){
                    if(value>=1000){
                        return value/1000+'k';
                    }
                    return value;
                }
            },
            splitLine:{
                lineStyle:{
                    type:'solid',
                    color:['#1A283A']
                }
            }
        },
        series: [
            {
                name: '累计确诊',
                type: 'line',
                data: total
            },
            {
                name: '累计治愈',
                type: 'line',
                data: heal
            },
            {
                name: '累计死亡',
                type: 'line',
                data: dead
            }
        ]
    };
    myChart.setOption(options);
}
//通过折线图的方式表现最近一段时间，全国疫情的新增趋势
function showIncreaseTrend(){
    let addList = trendData.chinaDayAddList;
    let confirm = [];
    let importCase = [];
    let suspect = [];
    let dates = [];
    addList.forEach(item => {
        confirm.push(item.confirm);
        importCase.push(item.importedCase);
        suspect.push(item.suspect);
        dates.push(item.date);
    });
    let myChart = echarts.init(document.getElementById('increase'),'dark');
    let options = {
        title:{
            text:'全国新增趋势'
        },
        tooltip:{
            trigger: 'axis',
            axisPointer:{
                lineStyle:{
                    type:'solid',
                    color: '#7171C6'
                }
            }
        },
        legend:{
            top:'25px'
        },
        grid: {
            left: '4%',
            right: '6%',
            bottom: '4%',
            top: 50,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dates
        },
        yAxis: {
            type: 'value',
            splitLine:{
                lineStyle:{
                    type:'solid',
                    color:['#1A283A']
                }
            }
        },
        series: [
            {
                name: '新增确诊',
                type: 'line',
                data: confirm,
                smooth:true
            },
            {
                name: '新增疑似',
                type: 'line',
                data: suspect,
                smooth:true
            },
            {
                name: '新增境外输入',
                type: 'line',
                data: importCase,
                smooth:true
            }
        ]
    };
    myChart.setOption(options);
}
//通过柱状图展示全国确诊前十的省市
function showTopArea() {
    let dataX = [];
    let dataY = [];
    let dealData = allData.areaTree[0].children.concat([]);
    dealData.sort(function (a, b) {
        return b.total.confirm - a.total.confirm;
    }).splice(10);
    dealData.forEach(item => {
        dataX.push(item.name);
        dataY.push(item.total.confirm);
    });
    let myChart = echarts.init(document.getElementById('sort'), 'dark');
    let options = {
        title: {
            text: '全国确诊省市TOP10'
        },
        color: '#54A2D5',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: "shadow"
            }
        },
        xAxis: {
            data: dataX
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                show: true,
                color: 'white',
                fontSize: 12,
                formatter: function (value) {
                    if (value >= 1000) {
                        return value / 1000 + 'k';
                    }
                    return value;
                }
            }

        },
        series: [{
            type: 'bar',
            data: dataY,
            barMaxWidth: '50%'
        }]
    };
    myChart.setOption(options);
}
//通过扇形图展示全国境外输入前五的省市
function showOutput() {
    let needData = allData.areaTree[0].children.concat([]);
    let importData = [];
    needData.forEach(item => {
        for(let subitem of item.children){
            if(subitem.name == '境外输入'){
                importData.push({
                    name:item.name,
                    value:subitem.total.confirm
                })
            }
        }
    });
    importData.sort(function(a,b){
        return b.value - a.value;
    })
    importData.splice(5);
    let myChart = echarts.init(document.getElementById('output'),'dark');
    let options = {
        title:{
            text:'境外输入省市TOP5',
            left:'center'
        },
        tooltip:{
            trigger:'item',
            formatter:'{a} <br/>{b} : {c} ({d}%)'
        },
        legend:{
            orient: 'vertical',
            left: 'left'
        },
        series:[
            {
                name:'省市名称',
                type:'pie',
                radius:'50%',
                data:importData,
                emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.setOption(options);
}
//展示中国的疫情地图
function showEpidemicMap(){
    let regionSituation = [];
    allData.areaTree[0].children.forEach(item => {
        regionSituation.push({
            name:item.name,
            value:item.total.nowConfirm
        })
    });
    let myChart = echarts.init(document.getElementById('map'),'dark');
    let options = {
        title:{
            text:'全国疫情地图',
            left:'20px',
            top:'20px',
            textStyle:{
                fontSize:30
            }
        },
        tooltip:{
            trigger:'item'
        },
        visualMap:{
            show:true,
            x:'left',
            y:'bottom',
            textStyle:{
                fontSize:8,
            },
            splitList:[
                {start:10000},
                {start:1000,end:9999},
                {start:500,end:999},
                {start:100,end:499},
                {start:10,end:99},
                {start:1,end:9},
                {start:0,end:0}
            ],
            color:['#E2EBF4','#FFE7B2','#FFCEA0','#FFA577','#FF6341','#FF2736','#DB1F05'].reverse()
        },
        series:[
            {
                name:'现存确诊病例',
                type:'map',
                mapType:'china',
                roam: false,
                itemStyle:{
                    borderWidth:0.5,
                    borderColor:'#009fe8',
                    areaColor:'#ffefd5',
                    emphasis:{
                        borderWidth: 0.5,
                        borderColor: '#4b0082',
                        areaColor: "#fff",
                    }
                },
                label: { 
                    normal: {
                        show: true,
                        fontSize: 8,
                    },
                    emphasis: {
                        show: true,
                        fontSize: 10,
                    }
                },
                data:regionSituation
            },
        ]
    };
    myChart.setOption(options);
}
